import { PenChildProps } from "@/types";
import { ColorPicker, InputNumber, Select, Space, Switch } from "antd";
import { FormRowCol } from "@/components/common/FormRowCol.tsx";

interface Props extends PenChildProps {
  showDuration?: boolean;
}
export function PositionAndSize({
  penOptions,
  setPenValue,
  showDuration,
}: Props) {
  const getCombineOptions = () => {
    let result: {
      label: string;
      value: number;
    }[] = [];
    if (penOptions.children && penOptions.children.length > 0) {
      for (let i = 0; i < penOptions.children.length; i++) {
        result.push({ label: `状态${i + 1}`, value: i });
      }
    }
    return result;
  };
  return (
    <>
      <Space
        style={{ padding: "10px" }}
        className={"w-full"}
        direction="vertical"
      >
        {showDuration && (
          <FormRowCol label="动画时长(ms)">
            <InputNumber
              className={"w-full"}
              value={penOptions.duration}
              onChange={(value) => setPenValue("duration", value)}
            />
          </FormRowCol>
        )}
        <FormRowCol label="X">
          <InputNumber
            className={"w-full"}
            value={penOptions.x}
            onChange={(value) => setPenValue("x", value)}
            placeholder={"px"}
          />
        </FormRowCol>
        <FormRowCol label="Y">
          <InputNumber
            className={"w-full"}
            value={penOptions.y}
            placeholder={"px"}
            onChange={(value) => setPenValue("y", value)}
          />
        </FormRowCol>
        <FormRowCol label="宽度">
          <InputNumber
            className={"w-full"}
            placeholder={"px"}
            onChange={(value) => setPenValue("width", value)}
            value={penOptions.width?.toFixed(2)}
          />
        </FormRowCol>
        <FormRowCol label="高度">
          <InputNumber
            className={"w-full"}
            placeholder={"px"}
            value={penOptions.height?.toFixed(2)}
            onChange={(value) => setPenValue("height", value)}
          />
        </FormRowCol>
        <FormRowCol label="锁定宽高比">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.ratio}
            onChange={(checked) => {
              setPenValue("ratio", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="圆角">
          <InputNumber
            className={"w-full"}
            value={penOptions.borderRadius}
            min={0}
            max={0.9}
            step={0.01}
            placeholder={"<1比例"}
            onChange={(value) => setPenValue("borderRadius", value)}
          />
        </FormRowCol>
        <FormRowCol label="旋转">
          <InputNumber
            className={"w-full"}
            value={penOptions.rotate}
            placeholder={"°"}
            onChange={(value) => setPenValue("rotate", value)}
          />
        </FormRowCol>

        <FormRowCol label="内边距-上">
          <InputNumber
            className={"w-full"}
            placeholder={"px"}
            value={penOptions.paddingTop}
            onChange={(value) => setPenValue("paddingTop", value)}
          />
        </FormRowCol>
        <FormRowCol label="内边距-右">
          <InputNumber
            placeholder={"px"}
            className={"w-full"}
            value={penOptions.paddingRight}
            onChange={(value) => setPenValue("paddingRight", value)}
          />
        </FormRowCol>
        <FormRowCol label="内边距-下">
          <InputNumber
            placeholder={"px"}
            className={"w-full"}
            value={penOptions.paddingBottom}
            onChange={(value) => setPenValue("paddingBottom", value)}
          />
        </FormRowCol>
        <FormRowCol label="内边距-左">
          <InputNumber
            placeholder={"px"}
            className={"w-full"}
            value={penOptions.paddingLeft}
            onChange={(value) => setPenValue("paddingLeft", value)}
          />
        </FormRowCol>
        <FormRowCol label="进度">
          <InputNumber
            className={"w-full"}
            value={penOptions.progress}
            min={0}
            max={1}
            step={0.01}
            placeholder={"<1比例"}
            onChange={(value) => setPenValue("progress", value)}
          />
        </FormRowCol>
        <FormRowCol label="进度颜色">
          <ColorPicker
            className={"w-full"}
            value={penOptions.progressColor}
            showText
            allowClear
            onChange={(_, hex) => {
              setPenValue("progressColor", hex);
            }}
          />
        </FormRowCol>
        <FormRowCol label="垂直进度">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.verticalProgress}
            onChange={(checked) => {
              setPenValue("verticalProgress", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="反向进度">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.reverseProgress}
            onChange={(checked) => {
              setPenValue("reverseProgress", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="水平翻转">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.flipX}
            onChange={(checked) => {
              setPenValue("flipX", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="垂直翻转">
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.flipY}
            onChange={(checked) => {
              setPenValue("flipY", checked);
            }}
          />
        </FormRowCol>
        <FormRowCol label="输入框" illustrate={"是否单击，就显示文本输入框"}>
          <Switch
            checkedChildren="开启"
            unCheckedChildren="关闭"
            checked={penOptions.input}
            onChange={(checked) => {
              setPenValue("input", checked);
            }}
          />
        </FormRowCol>
        {penOptions.name == "combine" && (
          <FormRowCol label="状态">
            <Select
              className={"w-full"}
              value={Number(penOptions.showChild)}
              options={getCombineOptions()}
              onSelect={(value: number) => {
                setPenValue("showChild", value);
              }}
            />
          </FormRowCol>
        )}
      </Space>
    </>
  );
}
